import React, { useState, useEffect } from 'react';
import { Row, Col, Menu } from 'antd';
import styles from './style.less';
import { Home } from './data';
import { getLogin, getDetail } from './service';
import Rules from './mockData';
import HomeComp from './components/Home';
import Promotion from './components/Promotion';
console.log(Rules)


// const { Step } = Steps;
// const { Title } = Typography;
// const { Option } = Select;
// const { RangePicker } = DatePicker;
// DatePicker, Switch



export default function Detail(props: any) {

  const [homeMessage, setHomeMessage] = useState<Home>({
    auditPlanCount: '',
    auditRefusedPlanCount: '',
    balance: '',
    budget: '',
    clickCount: '',
    notBudgetPlanCount: '',
    platformChannelName: '',
    realtimeCost: '',
    realtimeCostSum: '',
    showCount: '',
    userName: '',
    validPlanCount: '',
    status: ''
  });
  const [menuVal, setMenuVal] = useState(['1']);
  console.log(props, '父子间props');

  const query = props.location.query;
  const loginParams = {
    accountId: query.id * 1,
    platformChannel: query.platformChannel * 1
  };
  const detailParams = {
    accountId: query.id * 1,
    platformChannel: query.platformChannel * 1,
    pushStatus: 1,
    accountNo: query.platformChannel === '0' ? `广点通-${query.username}` : `巨量引擎-${query.username}`
  }


  useEffect(() => {
    getLogin({ ...loginParams }).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setHomeMessage({ ...res });
        // setTableData([]);
      }
    });
    getDetail({ ...detailParams }).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setHomeMessage({ ...res });
        // setTableData([]);
      }
    });
  }, []);

  const clickMenu = (e: any) => {
    console.log('click', e);
    setMenuVal(e.keyPath);
  };

  return (
    <Row className={styles.row}>
      <Col flex={1}>
        {/* 相关平台展示 */}
        <div className={styles.platform}>
          <div>{ homeMessage.platformChannelName }</div>
          <div className={styles.effect}>
            <div>{ query.username }</div>
            <div>（{ homeMessage.status === '0' ? '未生效' : '正常生效' }）</div>
          </div>
        </div>
        {/* 侧边栏 */}
        <div className="menu">
          <Menu mode="vertical" onClick={clickMenu} defaultSelectedKeys={menuVal}>
            <Menu.Item key="1" title="首页">首页</Menu.Item>
            <Menu.Item key="2" title="搜索推广">搜索推广</Menu.Item>
          </Menu>
        </div>
      </Col>
      <Col flex={23} style={menuVal.includes('2') ? {
        width: '0%'
      } : {
        width: 'auto'
      }}>
        {menuVal.includes('1') ? <HomeComp { ...props } /> : <Promotion { ...props} /> }
      </Col>
    </Row>
  );
}
